<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

// 导航菜单配置数组
const navItems = ref([
  {
    id: 'home',
    name: '文化节',
    path: '/',
    icon: '/images/tab-home.png',
    activeIcon: '/images/tab-home-active.png'
  },
  {
    id: 'news',
    name: '报道',
    path: '/news',
    icon: '/images/tab-news.png',
    activeIcon: '/images/tab-news-active.png'
  },
  {
    id: 'register',
    name: '报名',
    path: '/register',
    icon: '/images/tab-register.png',
    activeIcon: '/images/tab-register-active.png'
  },
  {
    id: 'profile',
    name: '我的',
    path: '/profile',
    icon: '/images/tab-me.png',
    activeIcon: '/images/tab-me-active.png'
  }
])

const router = useRouter()
const route = useRoute()

// 计算当前激活的导航项
const activeNavId = computed(() => {
  return navItems.value.find(item => item.path === route.path)?.id || 'home'
})

// 导航点击处理函数
const handleNavClick = item => {
  if (item.path !== route.path) {
    router.push(item.path)
  }
}

// 判断导航项是否激活
const isActive = item => {
  return activeNavId.value === item.id
}

// 图片加载错误处理
const handleImageError = (event, item) => {
  console.error('图片加载失败:', event.target.src)
  // 显示备用图标
  item.showFallback = true
}

// 图片加载成功处理
const handleImageLoad = event => {
  console.log('图片加载成功:', event.target.src)
}

// 导出函数供外部使用
defineExpose({
  navItems
})
</script>

<template>
  <div class="app">
    <main class="main-content">
      <router-view />
    </main>

    <!-- 底部导航栏 -->
    <nav class="bottom-navbar">
      <div
        v-for="item in navItems"
        :key="item.id"
        class="nav-item"
        :class="{ active: isActive(item) }"
        @click="handleNavClick(item)"
      >
        <div class="nav-icon-wrapper">
          <img
            v-if="!item.showFallback"
            class="nav-icon"
            :src="isActive(item) ? item.activeIcon : item.icon"
            :alt="item.name"
            @error="e => handleImageError(e, item)"
            @load="handleImageLoad"
          >
          <div v-else class="nav-icon-fallback">
            {{ item.fallbackIcon }}
          </div>
        </div>
        <span class="nav-label">{{ item.name }}</span>
      </div>
    </nav>
  </div>
</template>

<style lang="less" scoped>
// 定义变量
@light-green: #a8d5a8;
@white: #ffffff;
@text-dark: #2c3e50;
@text-gray: #333333;
@shadow: rgba(0, 0, 0, 0.1);

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f8f9fa;
}

// 主内容区域
.main-content {
  flex: 1;
  overflow-y: auto;
}

// 底部导航栏
.bottom-navbar {
  flex: 0;
  background: @white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2px 10px @shadow;

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: @text-gray;
    padding: 1rem 0;
    border-radius: 8px;
    width: 50%;
    cursor: pointer;
    user-select: none;

    .nav-icon-wrapper {
      position: relative;
      margin-bottom: 0.2rem;
    }

    .nav-icon {
      width: 38px;
      height: 45px;
    }

    .nav-icon-fallback {
      width: 38px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      background: #f0f0f0;
      border-radius: 8px;
    }

    .nav-label {
      font-size: 0.7rem;
      font-weight: 500;
    }

    &.active {
      color: @text-gray;
    }
  }
}
</style>
